<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>网盘-登录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script>
        $(function () {
            $("#login").click(function () {
                $("#loginWarn").text("")
                $("#uesrnameWarn").text("")
                $("#passwordWarn").text("")

                const username = $("#username").val()
                const password = $("#password").val()

                let check = true
                if(username === ""){
                    $("#uesrnameWarn").text("请输入用户名！")
                    check = false
                }
                if(password === ""){
                    $("#passwordWarn").text("请输入密码！")
                    check = false
                }

                if(!check){
                    return
                }

                $.ajax({
                    url:'login',//请求的url
                    type:'POST', //请求方式，GET或POST
                    // data:{ //发送服务器的数据
                    //     username,
                    //     password
                    // },
                    data:JSON.stringify({ //发送服务器的数据
                        username,
                        password
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                    success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                        if(data.code!=0){
                            $("#loginWarn").text(data.msg)
                        }else{
                            location.href="note.html"
                        }
                    },
                    error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                        $("#loginWarn").text(xhr.responseJSON.message)
                        // console.log(xhr.responseJSON) // json格式，ajax请求使用该对象
                        // console.log(xhr.responseText) // 文本格式，普通请求使用该对象
                    }
                })
            })
        })

    </script>
    <style>
        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }
        .warn{
            color: red;
        }
    </style>
</head>
<body >
<form class="form-signin">
    <input type="text" id="username" class="form-control" placeholder="用户名" required autofocus>
    <span class="warn" id="uesrnameWarn"></span>
    <input type="password" id="password" class="form-control" placeholder="密码" required>
    <span class="warn" id="passwordWarn"></span>
    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me"> 记住密码
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" id="login" type="button">登录</button>
    <span class="warn" id="loginWarn"></span>
</form>
</body>
</html>